<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>告警分析</title>
		<link rel="stylesheet" href="assets/css/common.css">
		<link rel="stylesheet" href="assets/css/emergency.css">
		<link rel="stylesheet" href="assets/layui/css/layui.css">
		<link rel="stylesheet" href="assets/css/reset-layui-style.css?v=33">
	</head>
	<body>
		<div class="main-page">
			<div class="page-body flex">
				<div class="sub-page-container">
					<div class="right-content-wrapper">
						<div class="right-content-box">
							<div class="cha">
								<img src="assets/img/item4.png">
							</div>
							<ul class="tags">
								<!-- <li>&lt;</li>
								<li>返回</li> -->
								<!-- <li> | </li> -->
								<li>有组织</li>
								<li>&gt;</li>
								<li>告警分析</li>
							</ul>
							<!-- 我的页面 -->
							<div class="content-section emergency">
								<!-- 上部分echarts -->
								<div class="main-section">
									<div class="card flex">
										<span class="card-span">15天告警</span>
									</div>
									<div class="charts-box line-one">
										<!-- echars -->
										<div class="chart"></div>
									</div>
								</div>
								<!-- 下部分echarts -->
								<!-- echart圆形图 -->
								<div class="up-box flex">
									<div class="round-box">
										<div class="card">
											<span class="card-span">月度告警（次）</span>
										</div>
										<div class="charts-box line-one flex">

											<!-- echars -->
											<div id="echart"></div>
											<div class="information">
												<ul>
													<li class="information-li flex">
														<span class="information-span">154</span>
														<div class="flex">
															<span class="information-icon"></span>
															<span class="information-span2">车辆速度</span>
														</div>
													</li>
													<li class="information-li flex">
														<span class="information-span">15</span>
														<div class="flex">
															<span class="information-iconbule"></span>
															<span class="information-span2">设备故障</span>
														</div>
													</li>
													<li class="information-li flex">
														<span class="information-span">116</span>
														<div class="flex">
															<span class="information-iconzi"></span>
															<span class="information-span2">空气质量</span>
														</div>
													</li>
												</ul>
											</div>
											<div class="shuju">
												<div class="emepng flex">
													<span class="emepng-1">最多类型</span>
													<span class="emepng-2">设备故障</span>
													<span class="emepog-3"></span>
												</div>
												<div class="emepng flex">
													<span class="emepng-1">最多类型</span>
													<span class="emepng-2">车辆违规</span>
													<span class="emepog-4 "></span>
												</div>
											</div>
										</div>
									</div>
									<div class="tale-box round-box">
										<div class="card">
											<span class="card-span">故障诊断</span>
										</div>
										<div class="card-content">
											<table class="table">
												<thead>
													<tr>
														<th>区域</th>
														<th>设备名称</th>
														<th>故障时间</th>
														<th>恢复时间</th>
														<th>持续时长（h）</th>
														<th>故障类型</th>
													</tr>
												</thead>
												<tbody class="tbody">
													<tr>
														<td>道路</td>
														<td>4#干雾机</td>
														<td>2021-03-12</td>
														<td>2021-03-12</td>
														<td>2分钟</td>
														<td class="colocorange">掉线</td>

													</tr>
													<tr>
														<td>道路</td>
														<td>4#干雾机</td>
														<td>2021-03-12</td>
														<td>2021-03-12</td>
														<td>2分钟</td>
														<td class="colocorange">掉线</td>

													</tr>
													<tr>
														<td>道路</td>
														<td>4#干雾机</td>
														<td>2021-03-12</td>
														<td>2021-03-12</td>
														<td>2分钟</td>
														<td class="cologreen">掉线</td>

													</tr>
													<tr>
														<td>道路</td>
														<td>4#干雾机</td>
														<td>2021-03-12</td>
														<td>2021-03-12</td>
														<td>2分钟</td>
														<td class="colocorange">掉线</td>

													</tr>
													<tr>
														<td>道路</td>
														<td>4#干雾机</td>
														<td>2021-03-12</td>
														<td>2021-03-12</td>
														<td>2分钟</td>
														<td class="cologreen">掉线</td>

													</tr>
													<tr>
														<td>道路</td>
														<td>4#干雾机</td>
														<td>2021-03-12</td>
														<td>2021-03-12</td>
														<td>2分钟</td>
														<td class="colocorange">掉线</td>

													</tr>
													<tr>
														<td>道路</td>
														<td>4#干雾机</td>
														<td>2021-03-12</td>
														<td>2021-03-12</td>
														<td>2分钟</td>
														<td class="colocorange">掉线</td>

													</tr>
													<tr>
														<td>道路</td>
														<td>4#干雾机</td>
														<td>2021-03-12</td>
														<td>2021-03-12</td>
														<td>2分钟</td>
														<td class="colocorange">掉线</td>

													</tr>


												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
		<script src="assets/js/jquery.SuperSlide.2.1.3.js"></script>
		<script src="assets/layui/layui.js"></script>
		<script src="assets/js/browser.js"></script>
		<script src="assets/js/select.js"></script>
		<script src="assets/js/page.js"></script>
		<script src="assets/js/echarts.min.js"></script>
		<script src="./assets/js/emergency.js"></script>
		<script>
			// 渲染左侧菜单树
			new LeftSiderMenu({
				el: ".sub-page-container",
				size: 10,
				curMenu: "告警分析",
				menus: [{
						href: "有组织实时数据.html",
						text: "实时监控"
					},
					{
						href: "数据分析.html",
						text: "数据分析"
					},
					{
						href: "运行状态.html",
						text: "运行状态"
					},
					{
						href: "告警分析.html",
						text: "告警分析"
					},

				]
			});

			// 渲染底部菜单
			new Footer({
				el: ".main-page",
				curMenu: "有组织",
				size: 4,
				menus: [{
						href: "有组织.html",
						text: "有组织"
					},
					{
						href: "无组织.html",
						text: "无组织"
					},
					{
						href: "车辆出入.html",
						text: "清洁运输"
					},
					{
						href: "视频.html",
						text: "视频大厅"
					}
				]
			});

			new SelectPlus({
				el: ".platfrom",
				data: [{
						value: "",
						text: "烟尘（mg/m³）"
					},
					{
						value: 1,
						text: "烟尘（1mg/m³）"
					},
					{
						value: 2,
						text: "烟尘（2mg/m³）"
					},
					{
						value: 3,
						text: "烟尘（3mg/m³）"
					}
				],
				done: function(row) {
					console.log(row);
				}
			})

			layui.use(['laypage', 'laydate'], function() {
				let laydate = layui.laydate;
				laydate.render({
					elem: '#dateBtn',
					type: 'datetime',
					done: function(value, date) {
						$("#date").val(value)
					}
				});
			})
		</script>
	</body>
</html>
